<template>
	<el-main class="bg">
		<el-form label-position="right" :model="query" class="form p_4" label-width="120">
			<el-row>
				<el-col :xs="24" :sm="24" :lg="8">
					<el-form-item label="患者姓名">
						<el-input v-model="query.userName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="10" :lg="8">
					<el-form-item>
						<el-button type="primary" @click="pageList()">查询</el-button>
						<el-button @click="reset()" style="margin-right: 74px;">重置</el-button>
						<el-button  class="" type="primary" style="margin-right: 14px;" @click="openDailog()">新增</el-button>
						<el-button  class="" type="danger" @click="delInfo()">删除</el-button>
					</el-form-item>
				</el-col>

			</el-row>
		</el-form>
		<el-table :data="list" style="width: 100%" >
			<el-table-column fixed type="selection" tooltip-effect="dark" width="55">
			</el-table-column>
			<el-table-column prop="user_name" label="用户名称" min-width="200">
			</el-table-column>
			<el-table-column prop="file_name" label="文件名称" min-width="200">
			</el-table-column>
			<el-table-column prop="create_time" label="上传时间" min-width="200">
			</el-table-column>
			<el-table-column align="center" label="操作" width="150">
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="primary"
						@click="download(scope.row)"
					>下载</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页器 -->
		<div class="mt text_center">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="query.page" :page-sizes="[7, 10, 30, 100]" :page-size="query.size"
				layout="total, sizes, prev, pager, next, jumper" :total="count">
			</el-pagination>
		</div>

		<el-dialog title="上传文件" :visible.sync="addVisible" width="20%" @click="closeDialog()">
			<el-upload
				class="upload-demo"
				ref="upload"
				action="https://jsonplaceholder.typicode.com/posts/"
				:on-change="handlePreview"
				:auto-upload="false"
				:limit="1">
				<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
				<div slot="tip" class="el-upload__tip">每次只能上传一个文件</div>
			</el-upload>
      </el-dialog>
	  <el-dialog title="下载文件" :visible.sync="downloadAddVisible" width="50%" @click="closeDownLoadDialog()">
		<el-form label-width="100px" :model="downloadData">
			<el-form-item label="公钥" prop="publicKey">
				<el-input size="small" v-model="downloadData.publicKey" auto-complete="off" placeholder="请输入公钥"></el-input>
			</el-form-item>
			<el-form-item label="秘钥" prop="secretKey">
				<el-input
					size="small"
					v-model="downloadData.secretKey"
					auto-complete="off"
					placeholder="请输入秘钥"
				></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="closeDownLoadDialog()">取消</el-button>
			<el-button size="small" type="primary" class="title" @click="dwonloadFile()">确定</el-button>
		</div>
	  </el-dialog>
	</el-main>
</template>
<script>
	import mixin from "@/mixins/page.js";
	import {pageList,upload,download} from '@/api/userFile.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				downloadData:{},
				downloadAddVisible:false,
				file: null,
				//数据源
				addData:{},
				//弹框
				addVisible: false,
				// 弹框
				showModal: false,
				// 查询
				query: {
					"size": 7,
					"page": 1,
					"userName":""
				},
				// 数据
				list: []
			}
		},
		methods: {
			closeDownLoadDialog(){
				this.downloadAddVisible = false;
			},
			download(row){
				this.downloadData = {};
				this.downloadAddVisible = true;
				this.downloadData.fileName = row.file_name;
				this.downloadData.filePath = row.file_path;
			},
			dwonloadFile(){
				if(this.downloadData.publicKey == null || this.downloadData.publicKey == ''){
					this.$message({
						type: 'error',
						message: '请输入公钥!'
					});
					return;
				}
				if(this.downloadData.secretKey == null || this.downloadData.secretKey == ''){
					this.$message({
						type: 'error',
						message: '请输入密钥!'
					});
					return;
				}
				window.open("http://127.0.0.1:5000/api/userFile/download?fileName="
				+encodeURIComponent(this.downloadData.fileName)+"&filePath="+encodeURIComponent(this.downloadData.filePath)+"&publicKey="+encodeURIComponent(this.downloadData.publicKey)+"&secretKey="+encodeURIComponent(this.downloadData.secretKey))
				this.downloadAddVisible = false;
			},
				/**
			 * 条数变更
			 * @param {Object} size
			 */
			handleSizeChange(size) {
				this.query.size = size;
				this.pageList();
			},
			getBlobFile(res) {
				let blob = new Blob([res.data], {
					type: ''
				})
				let objectUrl = URL.createObjectURL(blob)
				let link = document.createElement('a')
				let contentDisposition = res.headers['content-disposition']
				let index = contentDisposition.indexOf('=')
				let name = contentDisposition.substring(index + 1)
				let fileName = decodeURI(name)
				link.setAttribute("href", objectUrl)
				link.setAttribute("download",fileName)
				link.style.visibility = 'hidden'
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link)
			},

			/**
			 * 页数变更
			 * @param {Object} page
			 */
			handleCurrentChange(page) {
				this.query.page = page;
				this.pageList();
			},
			submitUpload(){
				if(this.file && this.file.name){
					let formData = new FormData();
					formData.append("file", this.file.raw);
					upload(formData).then(res =>{
						if(res.result){
							this.$message({
								type: 'success',
								message: '保存成功'
							});
							this.addVisible = false;
						}
					})
				}else {
					this.$message({
						type: 'error',
						message: '请选择需要上传的附件!'
					});
					return;
				}
				
			},
			closeDialog(){
				this.addVisible = false
			},
			openDailog(){
				this.file = {};
				this.addVisible = true
			},
			handlePreview(file) {
				this.file = file
			},
			pageList(){
				pageList(this.query).then(res =>{
					this.list = res.records
				})
			}
		},
		created() {
			this.pageList();
		}
	}
</script>

<style type="text/css">
	.bg {
		background: white;
	}

	.form.p_4 {
		padding: 1rem;
	}

	.form .el-input {
		width: initial;
	}

	.mt {
		margin-top: 1rem;
	}

	.text_center {
		text-align: center;
	}

	.float-right {
		float: right;
	}


	.modal_wrap{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.5);
		z-index: 9999999999;
	}
	.modal_wrap .modal_box{
		width: 400px;
		height: 200px;
		background: url("../../assets/modal_bg.jpg") no-repeat center;
		background-size: cover;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -200px;
		margin-top: -100px;
		border-radius: 10px;
		}
	.modal_wrap .modal_box .modal_box_close{
		font-size: 20px;
		position: absolute;
		top: 10px;
		right: 10px;
		cursor: pointer;
		}
	.modal_wrap .modal_box .modal_box_title{
	  text-align: center;
    font-size: 18px;
    margin: 16px auto;
    color: #fff;
    border-bottom: 1px solid rgba(117, 116, 116,0.5);
    padding-bottom: 16px;
    width: 356px;
		}
	.modal_wrap .modal_box .modal_box_text{
			text-align: center;
		font-size: 15px;
		color: #fff;
		margin-top: 25px;
		}
	.modal_wrap .modal_box .btn_box{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 42px;
		}
			.modal_wrap .modal_box .btn_box span{
				display: inline-block;
				width: 80px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border: 1px solid #ccc;
				font-size: 14px;
				cursor: pointer;
				color: #fff;
			}
	.modal_wrap .modal_box .btn_box span:nth-child(2){
		background: #409EFF;
		color: #fff;
		border-color: #409EFF;
		margin-left: 15px;
	}
</style>
